<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div id="app">
    <input type="text" v-model="thing" >
    <button v-on:click="addthing" >添加</button>
    <ul>
      <li v-for="(todo,index) in todos"   :id="index+1" >
        <label  v-bind:class="{del:todo.done}">{{index+1}}.{{todo.value}}</label>
        <time>{{todo.time|hhmmss}}</time>
      </li>

    </ul>
    <ul>
      <li v-for="value in object"  >
        {{value}}
      </li>
    </ul>
    <todo  v-bind:my-message="todos.length" v-bind:done="calculate"></todo>
  </div>

</template>

<script>
  import todo from "./todo.vue"
  export default {
    name: 'app',
    components:{todo},
    data () {
      return {
        thing:'',
        msg:"Hello",
        todos:[{value:"阅读一本关于前端开发的书",done:false,time:Date.now()},{value:"补充范例代码",done:true,time:new Date().getTime()},{value:"写心得",done:false,time:new Date().getTime()}],
        object :{
          first_name:"Ray",
          last_name:"Liang"
        }

      }
    },
    filters:{
      hhmmss(val){
        return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds()
      }
    },
    methods: {
      addthing: function () {
        this.todos.push({value: this.thing, done: false,time:Date.now()})
      }
    },
    computed:{
      calculate:function(){
        var a=0;
        for(var i=0;i<this.todos.length;i++){
          if(this.todos[i].done){
            a++;
          }
        }
        return a;
      }
    }
  }
</script>

<style>
  .del {
    text-decoration: line-through;
  }
</style>